<template>
    <div class="addDialog" id="addDialog">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="标题" prop="productTitle">
                <el-input v-model="ruleForm.productTitle"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="productDetail">
                <el-input type="textarea" v-model="ruleForm.productDetail"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="productType">
                <el-select v-model="ruleForm.productType" placeholder="类型" @change="changeType">
                    <el-option v-for="item in typeData" :key="item.id" :label="item.typeName" :value="item.id"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="价格" prop="productPrice">
                <el-input v-model="ruleForm.productPrice" :disabled="ruleForm.productType !== 1"></el-input>
            </el-form-item>
            <el-form-item label="试听文件">
                <el-upload
                    ref="replaceUploader"
                    v-model="ruleForm.fileUrl"
                    action="http://152.136.226.133:8080/hardcore/file/upload?fileType=auditio"
                    :limit="1"
                    :headers="myHeaders"
                    :show-file-list="true"
                    :file-list="mp3fileList1"
                    :on-success="fileUrlSuccess"
                    :beforeUpload="beforeAvatarUpload"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="完整文件">
                <el-upload
                    ref="replaceUploader"
                    v-model="ruleForm.fileUrl"
                    action="http://152.136.226.133:8080/hardcore/file/upload?fileType=complete"
                    :limit="1"
                    :headers="myHeaders"
                    :show-file-list="true"
                    :file-list="mp3fileList2"
                    :on-success="completeFileUrlSuccess"
                    :beforeUpload="beforeAvatarUpload"
                >
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload
                    action="http://152.136.226.133:8080/hardcore/file/upload?fileType=image"
                    list-type="picture-card"
                    :file-list="fileList"
                    :on-success="imageUrlSuccess"
                    :limit="1"
                    :headers="myHeaders"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div class="dialogFooter">
            <el-button type="primary" @click="submitForm('ruleForm')" :loading="editLoading">确 定</el-button>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        editOneData: {
            type: Object,
            default: {}
        },
        typeData: {
            type: Array,
            default: []
        },
        editLoading: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        editOneData: {
            handler(val) {
                this.ruleForm = val;
                this.fileList[0] = { name: '图片', url: val.imageUrl };
                this.mp3fileList1[0] = { name: '试听', url: val.fileUrl };
                this.mp3fileList2[0] = { name: '完整', url: val.completeFileUrl };
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            fileList: [],
            mp3fileList1: [],
            mp3fileList2: [],
            fileList: [],
            myHeaders: { token: localStorage.getItem('token') },
            ruleForm: {
                productTitle: '',
                productDetail: '',
                productType: '',
                productPrice: '',
                fileUrl: '',
                completeFileUrl: '',
                imageUrl: '',
                createBy: localStorage.getItem('userId')
            },
            rules: {
                productTitle: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { min: 0, max: 40, message: '长度在 0 到 40 个字符', trigger: 'blur' }
                ],
                productDetail: [
                    { required: true, message: '请输入简介', trigger: 'blur' },
                    { min: 0, max: 200, message: '长度在 0 到 200 个字符', trigger: 'blur' }
                ],
                productType: [{ required: true, message: '请输入类型', trigger: 'blur' }],
                productPrice: [{ required: true, message: '请输入价格', trigger: 'blur' }]
            }
        };
    },
    mounted() {},
    methods: {
        fileUrlSuccess(response) {
            this.ruleForm.fileUrl = response.data.url;
        },
        completeFileUrlSuccess(response) {
            this.ruleForm.completeFileUrl = response.data.url;
        },
        imageUrlSuccess(response) {
            this.ruleForm.imageUrl = response.data.url;
        },
        beforeAvatarUpload(file) {
            var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
            const extension = testmsg === 'mp3';
            if (!extension) {
                this.$message({
                    message: '上传文件只能是mp3格式！',
                    type: 'error'
                });
            }
            return extension;
        },
        changeType(val) {
            this.ruleForm.productPrice = val !== 1 ? 0 : '';
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$emit('workEdit', this.ruleForm);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>
<style lang="scss">
#addDialog {
    .el-upload--text {
        border: none;
        height: 32px;
        width: 80px;
    }
}
</style>
<style scoped>
.el-upload--text {
    border: none;
}
.dialogFooter {
    display: flex;
    justify-content: flex-end;
}
</style>
